<template>
  <div class="detail" v-title data-title="产品明细表">
    <a-row type="flex" justify="space-between" align="middle" class="row">
      <a-col :span="17">
        <div class="tab-span">
          <span
            v-for="(item, index) of activeTabList"
            :key="index"
            :class="[{ active: activeTab === index }]"
            @click="changeTab(index)"
            >{{ item.name }}</span
          >
        </div>
      </a-col>
      <a-col :span="6" style="margin: 5px 15px 7px 0px" v-if="activeTab == 0">
        <a-input-search
          placeholder="输入成品名称/产品名称进行搜索"
          v-model="keyword"
          @search="handleSearch"
          allowClear
        />
      </a-col>
    </a-row>
    <!-- 项目研发专区 -->
    <template v-if="activeTab == 0">
      <a-table
        class="hte-table-content"
        :columns="levelColumns"
        :data-source="listData"
        :rowKey="
          (record, index) => {
            return index
          }
        "
        :loading="tableLoading"
        :pagination="ipagination"
        bordered
        @change="handleTableChange"
      ></a-table>
    </template>
    <template v-else-if="activeTab == 1"> 
      <product-sale-value></product-sale-value>
    </template>
    <template v-else>
      <product-spec-map></product-spec-map>
    </template>
  </div>
</template>

<script>
import { getAction, postAction, downloadFileLink } from '@/api/manage'
export default {
  components: {
    ProductSaleValue: () => import('@views/productCycle/components/ProductSaleValue'),
    ProductSpecMap: () => import('@views/productCycle/components/ProductSpecMap')
  },
  data() {
    return {
      levelColumns: [],
      listData: [],
      tableLoading: false,
      ipagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30', '50'],
        showTotal: (total, range) => {
          return ' 共' + total + '条'
        },
        showQuickJumper: true,
        showSizeChanger: true,
        hideOnSinglePage: false,
        total: 0,
      },
      keyword: '',
      activeTab: 0,
      activeTabList: [{ name: '产品明细表' }, { name: '新产品销售值' }, { name: '产品规格地图' }],
    }
  },
  created() {
    this.levelColumns = [
      {
        title: '成品名称',
        dataIndex: 'spuName',
        key: 'skuName',
        width: '15%',
        align: 'center',
        customRender: (text, row, index) => {
          return {
            children: <span>{text}</span>,
            attrs: {
              rowSpan: row.spuNameRowSpan, //需要合并的数据
            },
          }
        },
      },
      {
        title: '序号2',
        dataIndex: 'productSort',
        key: 'productSort',
        align: 'center',
        width: '10%',
      },
      {
        title: '产品名称',
        dataIndex: 'productName',
        key: 'productName',
        align: 'center',
        width: '15%',
      },
      {
        title: '规格',
        dataIndex: 'productSpec',
        key: 'productSpec',
        align: 'center',
      },
      {
        title: '个数',
        dataIndex: 'productNum',
        key: 'productNum',
        align: 'center',
        width: '10%',
      },
      {
        title: '21年新增SKU',
        dataIndex: 'newSku',
        key: 'newSku',
        align: 'center',
        width: '15%',
      },
    ]

    this.initData()
  },
  methods: {
    // 切换大类别
    changeTab(index) {
      this.activeTab = index
      window.scrollTo(0, 0)
    },
    handleTableChange(pagination, filters, sorter) {
      if (this.tableLoading) {
        return
      }
      this.ipagination = pagination
      this.ipagination.pageNo = this.ipagination.current
      this.initData()
    },
    handleSearch() {
      if (this.tableLoading) {
        return
      }
      this.ipagination.current = 1
      this.initData()
    },
    initData() {
      if (this.tableLoading) {
        return
      }
      this.tableLoading = true
      getAction('/techProjectReport/productDetailList', {
        keyword: this.keyword,
        pageNo: this.ipagination.current,
        pageSize: this.ipagination.pageSize,
      })
        .then((res) => {
          if (res.code === 200 && res.result) {
            //this.listData = res.result.records || []
            this.listData = [
              { spuName: '生抽', productSort: '1' },
              { spuName: '生抽', productSort: '222' },
              { spuName: '蚝油', productSort: '133' },
              { spuName: '蚝油', productSort: '1333' },
            ]
            this.ipagination.total = res.result.total
            this.rowSpan('spuName')
          } else {
            this.$message.error(res.message)
            this.ipagination.total = 0
          }
          this.tableLoading = false
        })
        .catch((res) => {
          this.tableLoading = false
        })
    },
    rowSpan(key) {
      let arr = this.listData
        .reduce((result, item) => {
          if (result.indexOf(item[key]) < 0) {
            result.push(item[key])
          }
          return result
        }, [])
        .reduce((result, keys) => {
          const children = this.listData.filter((item) => item[key] === keys)
          result = result.concat(
            children.map((item, index) => ({ ...item, [`${key}RowSpan`]: index === 0 ? children.length : 0 }))
          )
          return result
        }, [])
      this.listData = arr
    },
  },
}
</script>

<style lang="less" scoped>
.detail {
  padding: 20px 0px 0px 0px;
  .row {
    border-bottom: 1px solid #dbdbdb;
    background-color: #fff;
  }
  .tab-span {
    //background-color: #31a0e1;
    color: black;
    border-radius: 2px;
    height: 50px;
    span {
      padding: 3px 30px;
      display: inline-block;
      height: 50px;
      line-height: 38px;
      margin: 0px 15px;
      cursor: pointer;
      transition: all 0.3s;
      &.active {
        color: #0581ca;
        border-bottom: 3px solid #3f9cd2;
      }
      &:hover {
        color: #0f91de;
      }
    }
  }
  .hte-table-content {
    background-color: #fff;
    padding: 15px;
  }
}
</style>